<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- <link rel="stylesheet" href="./fonts//demo.css"> -->
  <link rel="stylesheet" href="/admin/fonts/iconfont.css">
  <link rel="stylesheet" href="/admin/lib/layui/css/layui.css" />
  <style>
    .space_slide {
      margin: 10px 20px 30px 20px;
    }
  </style>
</head>

<body>

  <!-- <i class="iconfont icon-jiantou"> </i> -->
  <div class="layui-card space_slide">
    <div class="layui-card-header">
      <span class="layui-breadcrumb">
        <a href="https://5aebf8b605931.t73.qifeiye.com/">首页</a>
        <a href="">行业动态</a>
        <!-- <a href="">轮播图管理</a> -->
        <a><cite>文章管理</cite></a>
      </span>
    </div>
    <div class="layui-card-body">
      <!-- 动态表格开始 -->
      <table class="layui-table " lay-even lay-skin="row" lay-filter="article" id="article_list" lay-size="xs ">
        </tbody>
      </table>
      <!-- 动态表格开始 -->

    </div>
  </div>
</body>

</html>
<script src="/admin/lib/layui/layui.js"></script>

<script>
  //注意：导航 依赖 element 模块，否则无法进行功能性操作
  //JS
  var layer
  var form
  var table
  var $

  layui.use(['element', 'layer', 'util', 'laypage', 'table', 'jquery', 'form'], function () {
    var {
      laypage,
      element,
      // layer,
      util,
      // $
    } = layui
    layer = layui.layer
    form = layui.form;
    table = layui.table
    $ = layui.$;

    // 表格渲染
    tableIns = table.render({
      elem: '#goods_list',
      url: '/admin/goods/list',
      cols: [
        [{
          field: 'pi_checked',
          width: '5%',
          type: 'checkbox',
          fixed: 'left'
        }, {
          field: 'pi_id',
          title: 'ID',
          width: '5%',
          sort: true,
        }, {
          field: 'pi_name',
          title: '产品名称',
          width: '10%',
        }, {
          field: 'pi_title',
          title: '产品标题',
          width: '30%',
        }, {
          field: 'pi_img',
          title: '产品图片',
          width: '15%',
          templet: '<div><img src="{{d.pi_img}}" alt=""  width=500></div>'
        }, {
          field: 'pc_name',
          title: '产品分类',
          width: '15%',
          // templet: '#banner_sort_list'
        }, {
          field: 'experience',
          title: '操作',
          width: '20%',
          templet: '#operation',
          fixed: 'right'
        }]
      ],
      loading: true,
      toolbar: '#goods_list_top',
      title: '商品分类详情表',
      // totalRow: true,
      page: true,
      limits: [5, 10, 15, 20, 30, 50, 70, 80, 90, 100],
      limit: 10
    })


    //头部事件
    util.event('lay-header-event', {
      //左侧菜单事件
      menuLeft: function (othis) {
        layer.msg('展开左侧菜单的操作', {
          icon: 0
        });
      },
      menuRight: function () {
        layer.open({
          type: 1,
          content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
          area: ['260px', '100%'],
          offset: 'rt', //右上角
          anim: 5,
          shadeClose: true,
        });
      },
    });
  });
  layui.use(['laypage', 'layer'], function () {
    var laypage = layui.laypage,
      layer = layui.layer;

    //总页数低于页码总数
    laypage.render({
      elem: 'demo0',
      count: 8, //数据总数
      limit: 4
    });
  });
</script>